<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EWshop首页</title>
    <link rel="stylesheet" href="./css/ewshop.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609980_cdb5rtvsr4a.css">

</head>
<body>
<!--公共头部-->
<header>
    <!--头部内容-->
        <div id="top" class="w-100 border-top border-box bg-color-f5 border-bottom border-dd">
            <div class="top w-980px m-auto overflow-hidden">
                <div class="top_left fl py-1 font-666">您好，欢迎使用EWShop商城系统</div>
                <div class="top_right fr">
                    <ul class="w-100 fl py-1 ">
                        <li class="fl"><a href="" class="fl px-3 font-666">登录</a></a><span class="font-dddadb fl">|</span></li>
                        <li class="fl"><a href="" class="fl px-3 font-666">注册</a><span class="font-dddadb fl">|</span></li>
                        <li class="fl">
                            <a href="" class="fl px-3 font-666">
                                <i class="iconfont icon-icon01"></i>
                                购物车
                                <span class="font-red">0</span>
                                件</a>
                            <span class="font-dddadb fl">|</span>
                        </li>
                        <li class="fl"><a href="" class="fl px-3 font-666">订单查询</a></li>
                    </ul>
                </div>
            </div>
        </div>

    <!--搜索区域-->
        <div class="search w-980px m-auto my-4">
            <div class="logo fl">
                <img src="./img/logo.png" class="w-100" alt="" onclick="window.location.href='https://shop2.eduwork.cn/'">
            </div>
            <div class="search_form fl">
                <form action="" method="get">
                    <input type="search" name="search" id="">
                    <input type="submit" value="搜索">
                </form>
            </div>
            <div class="phone fr font-red font-16 font-weight-bold  border border-dd  py-1 px-3 mt-2">
                咨询热线：400-700-8888
            </div>
        </div>


    <!--导航区域-->
    <div class="c"></div><!--清除上面的浮动对下面的影响-->
    <nav class="w-980px m-auto bg-color-red overflow-hidden my-2">
        <ul class="fl">
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">首页</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">前沿</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">前端</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">后端</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">云计算</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">产品设计</a></li>
            <li class="fl"><a href="" class="fl font-14 font-weight-bold font-white py-2 px-4">关于我们</a></li>
        </ul>
    </nav>

    <!--广告区域-->
    <div class="w-980px m-auto">
        <img src="./img/ad.png" alt="">
    </div>
</header>


<!--特价商品-->
<section class="bargain w-980px m-auto overflow-hidden  mt-2">
    <div class="bargain_left fl ">
        <div class="font-14 font-weight-bold w-100 font-555 pl-4 border-box bg-color-fc">特价商品</div>
<!--            特价商品1-->
        <div class="bargain_left_bottom border-box fl px-1  ">
            <div class="bargain_goods fl py-2 px-1 ">
                <img src="./img/s.png" alt="" class="fl">
                <div class="fr px-1">
                    <a href="" class="font-555 font-12px">《细说PHP》第4版</a>
                    <p class="font-12px mt-4">
                        <span class="font-red">￥108.0</span>
                        <del class="font-12px font-555">￥158.0</del>
                    </p>
                </div>
            </div>
<!--            特价商品2-->
            <div class="bargain_goods fl py-2 px-1 ">
                <img src="./img/s.png" alt="" class="fl">
                <div class="fr px-1">
                    <a href="" class="font-555 font-12px">《细说PHP》第4版</a>
                    <p class="font-12px mt-4">
                        <span class="font-red">￥108.0</span>
                        <del class="font-12px font-555">￥158.0</del>
                    </p>
                </div>
            </div>
<!--            特价商品3-->
            <div class="bargain_goods fl py-2 px-1 ">
                <img src="./img/s.png" alt="" class="fl">
                <div class="fr px-1">
                    <a href="" class="font-555 font-12px">《细说PHP》第4版</a>
                    <p class="font-12px mt-4">
                        <span class="font-red">￥108.0</span>
                        <del class="font-12px font-555">￥158.0</del>
                    </p>
                </div>
            </div>

        </div>
    </div>
    <div class="bargain_center fl">
        <img src="./img/2020-0827-5f474a7259d67.png" alt="" class="w-100 h-100">
    </div>
    <div class="bargain_right fr ">
        <div class="bargain_right_top fl w-100 bg-color-red">
            <div class="fl font-14 font-white font-weight-bold ml-2">网站公告</div>
            <a href="" class="fr font-14 font-white mr-2">更多>></a>
        </div>
        <div class="bargain_right_bottom fl w-100">
            <ul class="px-1">
                <li><a href="">2020年新书上架，共有新品3000套</a></li>
                <li><a href="">3周年店庆，部分图书3折</a></li>
                <li><a href="">新版《细说PHP》第四版上架热销中</a></li>
                <li><a href="">2020年新书上架，共有新品3000套</a></li>
                <li><a href="">3周年店庆，部分图书3折</a></li>
                <li><a href="">新版《细说PHP》第四版上架热销中</a></li>
                <li><a href="">2020年新书上架，共有新品3000套</a></li>
                <li><a href="">3周年店庆，部分图书3折</a></li>
            </ul>
        </div>
    </div>
</section>


<!--新品推荐-->
<section class="newGoods w-980px m-auto border-box border border-dd overflow-hidden my-2">
    <div class="newGoods_title  font-555 font-14 font-weight-bold">新品推荐</div>
    <div class="newGoods_goods">
        <!--商品1-->
        <div class="fl">
            <div class="m-auto mt-3"><a href="" class=""><img src="./img/2020-0820-5f3e084e2b714.png" alt="" class=""></a></div>
            <p><a href="" class="">《细说PHP》第2版</a></p>
            <p class="align-center mt-2">
                <span class="font-red font-16 font-weight-bold">￥78.0</span>
                <small>￥118.0</small>
            </p>
        </div>
        <!--商品2-->
        <div class="fl">
            <div class="m-auto mt-3"><a href="" class=""><img src="./img/2020-0820-5f3e084e2b714.png" alt="" class=""></a></div>
            <p><a href="" class="">《细说PHP》第2版</a></p>
            <p class="align-center mt-2">
                <span class="font-red font-16 font-weight-bold">￥78.0</span>
                <small>￥118.0</small>
            </p>
        </div>
        <!--商品3-->
        <div class="fl">
            <div class="m-auto mt-3"><a href="" class=""><img src="./img/2020-0820-5f3e084e2b714.png" alt="" class=""></a></div>
            <p><a href="" class="">《细说PHP》第2版</a></p>
            <p class="align-center mt-2">
                <span class="font-red font-16 font-weight-bold">￥78.0</span>
                <small>￥118.0</small>
            </p>
        </div>
        <!--商品4-->
        <div class="fl">
            <div class="m-auto mt-3"><a href="" class=""><img src="./img/2020-0820-5f3e084e2b714.png" alt="" class=""></a></div>
            <p><a href="" class="">《细说PHP》第2版</a></p>
            <p class="align-center mt-2">
                <span class="font-red font-16 font-weight-bold">￥78.0</span>
                <small>￥118.0</small>
            </p>
        </div>
        <!--商品5-->
        <div class="fl">
            <div class="m-auto mt-3"><a href="" class=""><img src="./img/2020-0820-5f3e084e2b714.png" alt="" class=""></a></div>
            <p><a href="" class="">《细说PHP》第2版</a></p>
            <p class="align-center mt-2">
                <span class="font-red font-16 font-weight-bold">￥78.0</span>
                <small>￥118.0</small>
            </p>
        </div>
    </div>
</section>

</body>
</html>